<template>
  <a-modal
    :title="formTile + '供应商'"
    :visible="true"
    width="50%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-form-model
          ref="ruleForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="form"
          :rules="rules"
        >
          <a-form-model-item
            label="供应商"
            prop="supplyCode"
          >
            <a-select
              v-model="form.supplyCode"
              placeholder="请选择供应商"
              show-search
              @search="handleSearch"
              @change="handleChange"
              :filterOption="filterOption"
              allow-clear
            >
              <a-select-option
                v-for="(item) in supplyList"
                :key="item.code"
                :value="item.code"
                :title="item.name"
              >
              {{ item.code }}- {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- <a-form-model-item label="供应商编号" prop="supplyCode">
            <a-input placeholder="请输入供应商编号" v-model="form.supplyCode" />
          </a-form-model-item> -->
          <!-- <a-form-model-item label="供应商简称" prop="name">
            <a-input placeholder="请输入供应商简称" v-model="form.name" />
          </a-form-model-item> -->
          <a-form-model-item
            label="供应商物料编号"
          >
            <a-input
              placeholder="请输入供应商物料编号"
              v-model="form.supplyAccCode"
            />
          </a-form-model-item>
          <a-form-model-item
            label="供应商物料名称"
          >
            <a-input
              placeholder="请输入供应商物料名称"
              v-model="form.supplyAccName"
            />
          </a-form-model-item>
          <a-form-model-item
            label="默认供应商"
            prop="defaultStatus"
          >
            <a-radio-group v-model="form.defaultStatus">
             
              <a-radio :value="1">
                是
              </a-radio>
               <a-radio :value="0">
                否
              </a-radio>
            </a-radio-group>

          </a-form-model-item>
          <!-- <a-form-model-item
            label="采购单位"
            prop="purchasingUnit"
          >
            <a-select
              v-model="form.purchasingUnit"
              placeholder="请选择采购单位"
              @change="changeUnit"
            >
              <a-select-option
                v-for="(item) in purchansingUnitList"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item> -->
          <a-form-model-item
            label="确认卡是否提交"
          >
         <a-radio-group v-model="form.confirmSubmit">
              <a-radio :value="1">
                是
              </a-radio>
              <a-radio :value="0">
                否
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item
            label="特殊费用"
          >
            <a-input
              placeholder="请输入特殊费用"
              v-model="form.specialExpense"
            />
          </a-form-model-item>
          <a-form-model-item
            label="模具费"
          >
            <a-input
              placeholder="请输入模具费"
              v-model="form.mouldExpense"
            />
          </a-form-model-item>
          <a-form-model-item
            label="特殊费用备注"
          >
            <a-input
              placeholder="请输入特殊费用备注"
              v-model="form.specialExpenseRemark"
              type="textarea"
            />
          </a-form-model-item>
          <a-form-model-item label="价格方案">
            <!-- <a-select v-model="form.supplyPriceSchemeId" placeholder="请选择价格方案">
              <a-select-option v-for="(item,i) in supplyPriceList" :key="i" :value="item.supplyPriceSchemeId">
                {{ item.name }}
              </a-select-option>
            </a-select> -->
            <a-select
                    allow-clear
                    style="width:200px"
                    v-if="form.supplyPriceSchemeName"
                    v-model="form.supplyPriceSchemeName"
                  >
                    <a-select-option
                      :value="form.supplyPriceSchemeName"
                    >
                       {{form.supplyPriceSchemeName}}
                    </a-select-option>
                  </a-select>
            <!-- <a-tag
              closable
              @close="delectPrice"
              color="blue"
              v-if="form.selectSupplyPrice"
            >
              {{form.supplyPriceSchemeName}}
            </a-tag> -->
            <a-button @click="toSupply" style="margin-left:10px">
              选择
            </a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-row style="margin-top:10px">
              <a-col
                :span="16"
                :offset="18"
                class="info-action"
              >
                <a-button @click="reset">
                  重置
                </a-button>
                <a-button
                  :style="{ marginLeft: '8px' }"
                  type="primary"
                  @click="onSubmit"
                  :loading="loading"
                >
                  保存
                </a-button>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </div>
    <supplyPrice
      v-if="showSupplyPrice"
      :supplyCode="form.supplyCode"
      @closePrice="closePrice"
    >
    </supplyPrice>
  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import supplyPrice from './supplyPrice.vue'
import { seachSupply, getDictChildList, supplyPriceList } from '@api/material/index'

export default {
  components: {
    supplyPrice
  },

  props: {
    supplyDetail: {
      type: Object,
      default: null
    },
    supplyIndex: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-material/',
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
      supplyList: [],
      keyWord: '',
      showSupplyPrice: false,
      purchansingUnitList: [],
      form: {
        supplyName: '',
        supplyCode: undefined,
        supplyAccName: '',
        supplyAccCode: '',
        defaultStatus: 1,
        mouldExpense:'',
        specialExpenseRemark:'',
        specialExpense:'',
        // purchasingUnit: undefined,
        // purchasingUnitValue: '',
        supplyPriceSchemeId: '',
        confirmSubmit:0,
        supplyPriceSchemeName:'',
      },
      rules: {
        supplyCode: [{ required: true, message: '请选择供应商', trigger: 'blur' }],
        name: [{ required: true, message: '请输入供应商简称', trigger: 'blur' }],
        supplyAccName: [{ required: true, message: '请输入供应商物料名称', trigger: 'blur' }],
        supplyAccCode: [{ required: true, message: '请输入供应商物料编号', trigger: 'blur' }],
        // purchasingUnit: [{ required: true, message: '请输入采购单位', trigger: 'blur' }],
        defaultStatus: [{ required: true, message: '请选择供应商类型', trigger: 'change' }]
      },
      loading: false
    }
  },

  created() {
    const { supplyDetail } = this.$props
    if (supplyDetail) {
      this.formTile = '编辑'
      this.form = supplyDetail
    } else {
      this.formTile = '新增'
    }
    this.handleSearch('')
    // this.getDictChildList('PURCHASING_UNIT', 'purchansingUnitList')
  },
  mounted() {},
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  methods: {
    async getDictChildList(name, list, id) {
      const params = {
        name: name,
        parentId: id
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this.purchansingUnitList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取采购单位列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取采购单位列表失败！')
      }
    },

    filterOption(input, option) {
      if (option && option.props && option.props.title) {
        return option.props.title === input || option.props.title.indexOf(input) !== -1
      } else {
        return true
      }
    },
    toSupply() {
      if (!this.form.supplyCode) {
        this.$message.error('请先选择供应商！')
      } else {
        this.showSupplyPrice = true
      }
    },
    closePrice(supplyPrice) {
      this.showSupplyPrice = false
      if(supplyPrice){
        this.form.supplyPriceSchemeName = supplyPrice.name
      this.form.supplyPriceSchemeId = supplyPrice.supplyPriceSchemeId
      }
    },
    delectPrice() {
      this.form.supplyPriceSchemeName = ''
      this.form.supplyPriceSchemeId = ''
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    reset() {
      this.$refs.ruleForm.resetFields()
      this.$emit('closeSupply')
    },
    async handleSearch(value) {
      const res = await seachSupply({ keyWord: value })
      if (res.code == 200) {
        this.supplyList = res.data
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('获取供应商列表失败！')
        }
      }
    },
    handleChange(value) {
      this.supplyList.map(item => {
        if (item.code == value) {
          this.form.supplyName = item.name
        }
      })
    },
    changeUnit(value) {
      this.purchansingUnitList.map(item => {
        if (item.code == value) {
          this.form.purchasingUnitValue = item.name
        }
      })
    },
    getDetail() {
      const params = {
        accSupplyId: this.accSupplyId
      }
      try {
        postAction(`${this.urlKey}material/specs/info`, params).then(res => {
          if (res.code == 200) {
            this.form = res.data
          } else {
            this.$message.warning(res.msg)
          }
        })
      } catch (error) {
        this.$message.warning('获取详情失败！')
      }
    },
    submit() {
      const params = JSON.parse(JSON.stringify(this.form))
      this.$emit('closeSupply', params, this.supplyIndex)
    }
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.ml-20 {
  margin-left: 20px;
}
</style>